<template>
	<view class="head">
		<view class="nologin" v-if="islogin == false">
			<view class="">
				<image src="@/static/homeimg/lgoin.png" mode="" class="w-[354rpx] h-[294rpx]"></image>
			</view>
			<view class="nologinmsg">
				您还没有登录，请登陆后查看订单
			</view>
			<view class="tologin mt-[58rpx]" @click="tologin">
				登录
			</view>
		</view>
		<!-- 顶部标题  选择栏 -->
		<view class="head-first mb-[20rpx] bg-[#fff]" style="" v-if="islogin == true">
			<navbar title="订单" bgColor="" :isshowback="false"></navbar>
			<!--选择栏 -->
			<view class=" ">
				<view class="flex">
					<view class="flex-1 text-center" @click="changeTab(index)" v-for="(item,index) in orderTab.list"
						:key="index">
						<!-- {{item.name}} -->
						<view>
							<view class="pt-[20rpx] text-[32rpx]" :class="tabsSelect == index ? 'orderTabText' : ''">
								{{item.name}}
							</view>
							<view class="line" :class="tabsSelect == index ? 'orderTabLine' : ''">
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class=" " v-if="islogin == true">
			<mescroll-body @init="mescrollInit" top="280" @down="downCallback" :bottom="20" :up="upOption"
				@up="upCallback">
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item @click="swipeClick($event, item)" v-for="(item,index) in orderData"
						:right-options="options" :key="index">
						<view class=" mb-[20rpx]  bg-[#fff] rounded-[20rpx] p-[20rpx] mx-[20rpx]">
							<!-- 列表头部 -->
							<view class="flex ">
								<!-- 商家图片 -->
								<image class=" flex-none w-[85rpx] h-[85rpx] rounded-[10rpx]" :src="item.doorstepPhoto">
								</image>
								<!-- 中间 商家名称 -->
								<view class="grow flex flex-col justify-between  mr-[30rpx] ml-[10rpx]">
									<view class="flex items-center " @click="tostore(item)">
										<view class="">
											<up-text :bold="true" :text="item.storeName" lines="1"></up-text>
										</view>
										<view class="ml-[10rpx]">
											<u-icon top="0rpx" name="arrow-right"></u-icon>
										</view>
									</view>
									<view
										class=" flex-none   text-[center]   text-[#090909] text-[24rpx]  rounded-[10rpx]">
										<!-- <text class="bg-[#EAEAEA] px-[10rpx] py-[7rpx]">超出配送范围</text> -->
									</view>
								</view>
								<!-- 配送状态 -->
								<view class="flex-none mt-[4rpx]">
									<!-- 未付款  如果未付款显示付款状态 ，否则再判断-->
									<up-text v-if="item.payStatus === 0 && item.orderStatus === -1"
										:text="ORDER_Status[item.orderStatus].text" color="#696969" size="14" lines="1"
										align="right"></up-text>
									<up-text v-if="item.payStatus === 0 && item.orderStatus !== -1"
										:text="PAY_Status[item.payStatus].text" color="#696969" size="14" lines="1"
										align="right"></up-text>
									<!-- 	<up-text 
												:text="item.payStatus" color="#696969" size="14" lines="1"
												align="right"></up-text> -->
									<!-- 超时未付 -->
									<up-text v-if="PAY_Status[item.payStatus].value == 2"
										:text="PAY_Status[item.payStatus].text" color="#696969" size="14" lines="1"
										align="right"></up-text>
									<!-- 已付，无退款 -->
									<up-text
										v-if="PAY_Status[item.payStatus].value == 1 && refundStatus[item.refundStatus].value == 0 "
										:text="ORDER_Status[item.orderStatus].text" color="#696969" size="14" lines="1"
										align="right"></up-text>
									<!-- 已付，有退款 -->
									<up-text
										v-if="PAY_Status[item.payStatus].value == 1 && refundStatus[item.refundStatus].value !== 0 "
										:text="refundStatus[item.refundStatus].text" color="#696969" size="14" lines="1"
										align="right"></up-text>

								</view>
							</view>
							<!-- 商品横向滚动 -->
							<view class="mt-[20rpx]  relative" @click="goOrderDetalis(item)">
								<scroll-view style="" scroll-x="true">
									<view class="flex ">
										<view class="" v-for="(item1,index1) in item.orderGoods" :key="index1">
											<view class="">
												<image v-if="item1.goodsImages != null" :src="item1.goodsImages[0]"
													class="w-[170rpx] h-[120rpx] mr-[10rpx] rounded-[10rpx]"></image>
												<image v-if="item1.goodsImages == null" src="@/static/imagenullerr.jpg"
													class="w-[170rpx] h-[120rpx] mr-[10rpx] rounded-[10rpx]"></image>
												<up-text color="#000000" size="13" :text="item1.goodsName"
													lines="1"></up-text>
											</view>
										</view>
									</view>
								</scroll-view>
								<!-- 当前商品价格 -->
								<view class="absolute w-[150rpx] h-[120rpx] top-0 right-0"
									style="background-color:rgba(255,255,255,0.8)">
									<view class="h-[100%] flex flex-col items-end justify-center">
										<view class="text-[#262934] text-[28rpx] font-semibold">
											￥{{item.totalPrice}}
										</view>
										<view class="text-[#393939] text-[26rpx]">
											共{{item.orderGoodsCount}}件
										</view>
									</view>
								</view>
							</view>
							<!-- 再来一单 -->
							<view v-if="ORDER_Status[item.orderStatus].value == 5"
								class="flex justify-end mt-[20rpx] mb-[0rpx] ">
								<view class="w-[170rpx] ">
									<up-button @click="tostore(item)" size="small" :hairline="true" color="#FE861C"
										:customStyle="{fontSize:'28rpx'}" :plain="true">再来一单</up-button>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</mescroll-body>
		</view>
	</view>
</template>

<script setup>
	import datanull from "@/static/homeimg/datanull.png"
	import navbar from "@/components/navgetbar/navindex.vue"
	import {
		oredrlist,
		delorder
	} from '@/api/order.js'
	import {
		ORDER_Status,
		refundStatus,
		PAY_Status
	} from '@/constant/index.js'
	import {
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom)
	const upOption = {
		noMoreSize: 1,
		empty: {
			tip: '暂无新订单', // 提示
			icon: datanull,

		},
		textNoMore: '-- 已经到底啦 --'


	}
	const islogin = ref(false)
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'

	onShow(() => {
		if (uni.getStorageSync('loginTokenKey') !== '') {
			islogin.value = true
		} else {
			islogin.value = false
		}
		const mescroll = getMescroll()
		if (mescroll?.num == 1) {
			mescroll.num = 1
			upCallback(mescroll)
		}
	})
	//跳转登录页
	const tologin = () => {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}
	//跳转
	const tostore = (item) => {
		console.log("item", item);
		uni.navigateTo({
			url: "/page_index/storedetals?id=" + item.storeId
		})
	}
	// 订单导航栏选择
	let orderTab = reactive({
		list: [{
				name: '全部订单',
				index: 0,
			},
			{
				name: '进行中',
				index: 1,
			},
			{
				name: '退款',
				index: 2,
			}
		]
	})
	//导航栏选择
	let tabsSelect = ref(0)
	let changeTab = (index) => {
		tabsSelect.value = index
		const msc = getMescroll()
		msc.resetUpScroll()
		msc.scrollTo(0, 0)
	}
	//获取初始化订单
	let orderData = ref([])
	const upCallback = (mescroll) => {
		setTimeout(() => {
			oredrlist({
				page: mescroll.num,
				limit: mescroll.size,
				status: tabsSelect.value
			}).then(res => {
				if (res.code === 200) {
					console.log('获取数据', res);
					const list = res.result.data || []
					if (mescroll.num === 1) orderData.value = []
					orderData.value = orderData.value.concat(list)
					console.log('list', orderData.value);
					mescroll.endBySize(list.length, res.result.total)
				}
			}).catch(() => {
				mescroll.endErr()
			})
		}, 500)

	}

	//向左拉 显示删除
	const options = [{
		text: '删除',
		style: {
			backgroundColor: 'rgb(255,58,49)',

		}
	}]

	//前往订单详情 详情分为有地图页面和无地图页面
	let goOrderDetalis = (e) => {
		// uni.navigateTo({
		// 	url: '/page_order/orderDetalis/orderDetalisNomap/orderDetalisNomap?orderNo=' + e.orderId
		// })	
		console.log("未付款的跳转", e);
		//未付款的跳转
		if (e.payStatus == 0 || e.payStatus == 2) {
			uni.navigateTo({
				url: '/page_order/orderDetalis/orderDetalisNomap/orderDetalisNomap?orderNo=' + e.orderId
			})
		}

		//已付款，商家自配送或者到店自取
		if ((e.payStatus === 1) && (e.deliveryType == 2 || e.deliveryType == 3)) { //商家自配送 到店自取
			uni.navigateTo({
				url: '/page_order/orderDetalis/orderDetalisNomap/orderDetalisNomap?orderNo=' + e.orderId
			})
		}
		if (e.deliveryType == 1 && e.payStatus === 1) { //点老板配送
			uni.navigateTo({
				url: '/page_order/orderDetalis/orderDetalis?orderNo=' + e.orderId
			})
		}
	}

	const swipeClick = (e, item) => {
		let {
			content
		} = e;
		console.log("ddddd", item);
		if (content.text === '删除') {
			uni.showModal({
				title: '温馨提示',
				content: '是否要删除该订单',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
						delorder({
							orderId: item.orderId
						}).then(res => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							const mescroll = getMescroll()
							mescroll.num = 1
							upCallback(mescroll)
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.nologin {
		width: 100%;
		display: flex;
		height: 100vh;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.nologinmsg {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 35rpx;
			padding-top: 22rpx;
		}

		.tologin {
			width: 412rpx;
			height: 98rpx;
			background: #FE861C;
			border-radius: 20rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 98rpx;
			text-align: center;
		}
	}

	.custom-style {
		color: #ff0000;
		width: 400rpx;
	}

	.orderTabText {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FE861C;
	}

	.orderTabLine {
		width: 47rpx;
		height: 8rpx;
		background-color: #FE861C;
		border-radius: 8rpx 8rpx 0 0;
		margin: 0 auto;
		// margin-top: 24rpx;
	}

	.line {
		margin-top: 20rpx;
	}

	// .head-title {
	// 	padding-top: 114rpx;
	// 	text-align: center;
	// 	font-size: 36rpx;
	// 	font-family: PingFang SC;
	// 	font-weight: 500;
	// 	color: #0A0A0A;
	// }

	.head {
		height: 100%;
		// background: url('@/static/homeimg/bgc.png') no-repeat;
		// background-size: 100% 100%;

	}

	.head-first {
		z-index: 10;
		position: fixed;
		width: 100%;
		// background-image: url('../../static/homeimg/bgc.png');
		// background-size: 100% 100%;
	}

	::v-deep .uni-swipe_button-group {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		position: absolute;
		top: 0;
		bottom: 0;
		// height: 100rpx;
		margin-bottom: 10px;
	}

	::v-deep .mescroll-empty {
		box-sizing: border-box;
		width: 100%;
		padding: 3.125rem 1.5625rem;
		text-align: center;
		position: relative;
		top: 300rpx !important;
	}
</style>